<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上书城 - 订单与支付</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Vue.js -->
    <script src="./js/vue.min.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="./js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #2c3e50, #4a6491);
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            font-size: 28px;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 25px;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
        }

        .nav-links a:hover {
            color: #ffd04b;
        }

        .page-title {
            text-align: center;
            margin: 30px 0;
            color: #2c3e50;
            font-size: 28px;
            position: relative;
        }

        .page-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, #3498db, #2c3e50);
            margin: 10px auto;
            border-radius: 2px;
        }

        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 25px;
            overflow: hidden;
        }

        .card-header {
            background-color: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
            font-weight: bold;
            color: #2c3e50;
            font-size: 18px;
        }

        .card-body {
            padding: 20px;
        }

        .form-item {
            margin-bottom: 22px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #606266;
        }

        .book-table {
            width: 100%;
            border-collapse: collapse;
        }

        .book-table th {
            background-color: #f8f9fa;
            padding: 12px 10px;
            text-align: left;
            font-weight: 600;
            color: #2c3e50;
            border-bottom: 1px solid #ebeef5;
        }

        .book-table td {
            padding: 15px 10px;
            border-bottom: 1px solid #ebeef5;
        }

        .book-cover {
            width: 80px;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .book-title {
            font-weight: 500;
            color: #2c3e50;
        }

        .price {
            color: #e74c3c;
            font-weight: bold;
        }

        .total-section {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            padding: 15px 0;
            border-top: 1px solid #ebeef5;
        }

        .total-label {
            font-size: 16px;
            font-weight: 500;
            margin-right: 15px;
        }

        .total-price {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;
        }

        .action-buttons .el-button {
            margin-left: 15px;
            min-width: 120px;
            height: 42px;
            font-size: 16px;
        }

        .payment-methods {
            display: flex;
            justify-content: center;
            margin: 25px 0;
        }

        .payment-card {
            width: 200px;
            height: 120px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 15px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .payment-card:hover {
            border-color: #3498db;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
        }

        .payment-card.selected {
            border-color: #3498db;
            background-color: rgba(52, 152, 219, 0.05);
        }

        .payment-icon {
            font-size: 40px;
            margin-bottom: 10px;
        }

        .payment-name {
            font-weight: 500;
            color: #2c3e50;
        }

        .alipay-icon {
            color: #009fe8;
        }

        .wechat-icon {
            color: #07c160;
        }

        .success-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 40px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .success-icon {
            font-size: 80px;
            color: #52c41a;
            margin-bottom: 20px;
        }

        .success-title {
            font-size: 28px;
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .success-subtitle {
            font-size: 18px;
            color: #606266;
            margin-bottom: 30px;
        }

        .order-info {
            text-align: left;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 6px;
            margin: 25px 0;
        }

        .order-info p {
            margin-bottom: 12px;
            font-size: 16px;
        }

        .order-info .label {
            display: inline-block;
            width: 100px;
            font-weight: 500;
            color: #2c3e50;
        }

        .step-indicator {
            display: flex;
            justify-content: space-between;
            max-width: 800px;
            margin: 40px auto 60px;
            position: relative;
        }

        .step-indicator::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e0e0e0;
            z-index: 1;
        }

        .step {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 30%;
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e0e0e0;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: bold;
            font-size: 18px;
        }

        .step.active .step-circle {
            background: #3498db;
        }

        .step.completed .step-circle {
            background: #52c41a;
        }

        .step-text {
            font-weight: 500;
            color: #909399;
        }

        .step.active .step-text {
            color: #3498db;
        }

        .step.completed .step-text {
            color: #52c41a;
        }

        .footer {
            text-align: center;
            padding: 30px 0;
            margin-top: 50px;
            color: #909399;
            font-size: 14px;
            border-top: 1px solid #ebeef5;
        }

        @media (max-width: 768px) {
            .step-indicator {
                flex-direction: column;
                align-items: center;
            }

            .step {
                margin-bottom: 30px;
                width: 100%;
            }

            .step-indicator::before {
                display: none;
            }

            .payment-methods {
                flex-direction: column;
                align-items: center;
            }

            .payment-card {
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 顶部导航 -->
    <header>
        <div class="header-content">
            <div class="logo">
                <i class="el-icon-reading"></i>
                网上书城
            </div>
            <ul class="nav-links">
                <li><a href="#">首页</a></li>
                <li><a href="#">图书分类</a></li>
                <li><a href="#">购物车</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">个人中心</a></li>
            </ul>
        </div>
    </header>

    <div class="container">
        <!-- 步骤指示器 -->
        <div class="step-indicator">
            <div class="step completed">
                <div class="step-circle">1</div>
                <div class="step-text">购物车</div>
            </div>
            <div class="step active" v-if="currentPage === 'order'">
                <div class="step-circle">2</div>
                <div class="step-text">订单确认</div>
            </div>
            <div class="step" :class="{'active': currentPage === 'pay'}" v-else>
                <div class="step-circle">2</div>
                <div class="step-text">订单确认</div>
            </div>
            <div class="step" :class="{'active': currentPage === 'pay', 'completed': currentPage === 'success'}">
                <div class="step-circle">3</div>
                <div class="step-text">支付订单</div>
            </div>
        </div>

        <!-- 订单页面 -->
        <div v-if="currentPage === 'order'">
            <h2 class="page-title">订单确认</h2>

            <div class="card">
                <div class="card-header">收货信息</div>
                <div class="card-body">
                    <div class="form-item">
                        <label class="form-label">收货人姓名</label>
                        <el-input v-model="orderForm.name" placeholder="请输入收货人姓名"></el-input>
                    </div>

                    <div class="form-item">
                        <label class="form-label">收货地址</label>
                        <el-input
                                v-model="orderForm.address"
                                placeholder="请输入详细收货地址"
                                type="textarea"
                                :rows="3"
                        ></el-input>
                    </div>

                    <div class="form-item">
                        <label class="form-label">联系电话</label>
                        <el-input v-model="orderForm.phone" placeholder="请输入联系电话"></el-input>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">商品信息</div>
                <div class="card-body">
                    <table class="book-table">
                        <thead>
                        <tr>
                            <th>商品</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in cartItems" :key="index">
                            <td>
                                <div style="display: flex; align-items: center;">
                                    <img :src="item.image" class="book-cover" alt="图书封面">
                                    <div style="margin-left: 15px;">
                                        <div class="book-title">{{ item.title }}</div>
                                        <div style="color: #909399; font-size: 14px;">{{ item.author }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="price">¥{{ item.price.toFixed(2) }}</td>
                            <td>{{ item.quantity }}</td>
                            <td class="price">¥{{ (item.price * item.quantity).toFixed(2) }}</td>
                        </tr>
                        </tbody>
                    </table>

                    <div class="total-section">
                        <div class="total-label">合计：</div>
                        <div class="total-price">¥{{ totalPrice.toFixed(2) }}</div>
                    </div>
                </div>
            </div>

            <div class="action-buttons">
                <el-button @click="goBack">返回购物车</el-button>
                <el-button type="primary" @click="submitOrder" :loading="submitting">提交订单</el-button>
            </div>
        </div>

        <!-- 支付页面 -->
        <div v-if="currentPage === 'pay'">
            <h2 class="page-title">支付订单</h2>

            <div class="card">
                <div class="card-header">订单信息</div>
                <div class="card-body">
                    <div class="order-info">
                        <p><span class="label">订单号：</span>{{ orderInfo.orderId }}</p>
                        <p><span class="label">订单金额：</span>¥{{ orderInfo.totalPrice.toFixed(2) }}</p>
                        <p><span class="label">收货人：</span>{{ orderInfo.name }}</p>
                        <p><span class="label">收货地址：</span>{{ orderInfo.address }}</p>
                        <p><span class="label">联系电话：</span>{{ orderInfo.phone }}</p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">选择支付方式</div>
                <div class="card-body">
                    <div class="payment-methods">
                        <div class="payment-card" :class="{'selected': paymentMethod === 'alipay'}" @click="paymentMethod = 'alipay'">
                            <i class="el-icon-bank-card payment-icon alipay-icon"></i>
                            <div class="payment-name">支付宝支付</div>
                        </div>
                        <div class="payment-card" :class="{'selected': paymentMethod === 'wechat'}" @click="paymentMethod = 'wechat'">
                            <i class="el-icon-chat-line-round payment-icon wechat-icon"></i>
                            <div class="payment-name">微信支付</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="action-buttons">
                <el-button @click="currentPage = 'order'">返回修改</el-button>
                <el-button type="primary" @click="payOrder" :loading="paying">立即支付</el-button>
            </div>
        </div>

        <!-- 支付成功页面 -->
        <div v-if="currentPage === 'success'">
            <div class="success-container">
                <i class="el-icon-success success-icon"></i>
                <h2 class="success-title">支付成功！</h2>
                <p class="success-subtitle">您的订单已支付成功，我们将尽快为您发货</p>

                <div class="order-info">
                    <p><span class="label">订单号：</span>{{ orderInfo.orderId }}</p>
                    <p><span class="label">支付金额：</span>¥{{ orderInfo.totalPrice.toFixed(2) }}</p>
                    <p><span class="label">支付方式：</span>支付宝支付</p>
                    <p><span class="label">支付时间：</span>{{ new Date().toLocaleString() }}</p>
                </div>

                <div class="action-buttons">
                    <el-button type="primary" @click="viewOrder">查看订单详情</el-button>
                    <el-button @click="goHome">返回首页</el-button>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>© 2024 网上书城 版权所有 | 客服电话: 400-123-4567</p>
        <p>让阅读成为习惯，让生活充满书香</p>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentPage: 'order', // order, pay, success
                submitting: false,
                paying: false,
                paymentMethod: 'alipay',
                orderForm: {
                    name: '张三',
                    address: '北京市海淀区中关村大街1号',
                    phone: '13800138000'
                },
                cartItems: [
                    {
                        id: 1,
                        title: 'JavaScript高级程序设计',
                        author: 'Nicholas C. Zakas',
                        price: 98.00,
                        quantity: 1,
                        image: 'https://via.placeholder.com/80x100?text=Book1'
                    },
                    {
                        id: 2,
                        title: '深入理解计算机系统',
                        author: 'Randal E.Bryant',
                        price: 128.00,
                        quantity: 2,
                        image: 'https://via.placeholder.com/80x100?text=Book2'
                    },
                    {
                        id: 3,
                        title: 'Vue.js设计与实现',
                        author: '霍春阳',
                        price: 89.00,
                        quantity: 1,
                        image: 'https://via.placeholder.com/80x100?text=Book3'
                    }
                ],
                orderInfo: {}
            }
        },
        computed: {
            totalPrice() {
                return this.cartItems.reduce((total, item) => {
                    return total + (item.price * item.quantity);
                }, 0);
            }
        },
        methods: {
            goBack() {
                alert('返回购物车');
            },
            submitOrder() {
                this.submitting = true;

                // 模拟API请求延迟
                setTimeout(() => {
                    // 在实际项目中，这里应调用后端接口
                    // axios.post('/car/orders/addOrder', {
                    //   orders: {
                    //     userId: "99",
                    //     orderToName: this.orderForm.name,
                    //     orderToAddress: this.orderForm.address,
                    //     orderToPhone: this.orderForm.phone,
                    //     orderTotalPrice: this.totalPrice
                    //   },
                    //   orderDescList: this.cartItems.map(item => ({
                    //     bookId: item.id,
                    //     count: item.quantity
                    //   })),
                    //   carIds: this.cartItems.map(item => item.id)
                    // })

                    // 保存订单信息
                    this.orderInfo = {
                        orderId: '202404211201314790',
                        name: this.orderForm.name,
                        address: this.orderForm.address,
                        phone: this.orderForm.phone,
                        totalPrice: this.totalPrice,
                        items: [...this.cartItems]
                    };

                    this.submitting = false;
                    this.currentPage = 'pay';
                }, 1000);
            },
            payOrder() {
                this.paying = true;

                // 模拟API请求延迟
                setTimeout(() => {
                    // 在实际项目中，这里应调用支付宝支付接口
                    // axios.post('/pay/aliPay', {
                    //   out_trade_no: this.orderInfo.orderId,
                    //   subject: '图书订单',
                    //   total_amount: this.orderInfo.totalPrice,
                    //   body: '网上书城图书购买'
                    // })

                    this.paying = false;
                    this.currentPage = 'success';
                }, 1500);
            },
            viewOrder() {
                alert('查看订单详情');
            },
            goHome() {
                this.currentPage = 'order';
            }
        }
    });
</script>
</body>
</html>